<template>
  <v-form
      ref="form"
      :lazy-validation="false"
    >
    <v-row>
      <v-col cols="10">
        <v-card flat>
          <v-card-text>
            <v-expansion-panels
              v-model="panel"
              multiple
              tile
            >
              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions v-if="type != 2">行程基本信息</v-expansion-panel-header>
                <v-expansion-panel-header hide-actions v-if="type == 2">
                  <div class="d-flex align-center">
                    <span class="mr-8">行程基本信息</span>
                    <v-select
                      v-model="tripinfo"
                      :items="childs"
                      item-text="tripname"
                      item-value="id"
                      return-object
                      hide-details
                      dense
                      @change="handleChangeTripinfo"
                      style="width: 360px">
                    </v-select>
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <v-container class="py-0">
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">产品名称：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-text-field
                            :value="tripinfo.foundation_prodcut_name"
                            hide-details
                            single-line
                            solo
                            flat
                            readonly>
                          </v-text-field>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">购物安排：</label>
                        <div class="pr-4 flex-grow-1">
                          <DictCombobox chips deletable-chips v-model="formData.detail.shopping" multiple type="shopping"/>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border ">
                      <v-row align="center" style="height: 100%;" class="flex-nowrap">
                        <label class="text-right flex-shrink-0" style="width: 140px;">自费项目：</label>
                        <div class="pr-4 flex-grow-1">
                          <DictCombobox chips deletable-chips v-model="formData.detail.self_cost" multiple type="selfcost"/>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                </v-container>
              </v-expansion-panel>
              
              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>
                  <div class="d-flex align-center">
                    <span class="mr-8">航班信息</span>
                    <v-select
                      v-model="tripinfo"
                      :items="childs"
                      item-text="tripname"
                      item-value="id"
                      return-object
                      hide-details
                      dense
                      @change="handleChangeTripinfo"
                      style="width: 360px">
                    </v-select>
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <v-container class="py-0">
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <div class="flex-shrink-0 text-center" style="width: 140px;border-right: 1px solid #ccc;">
                          <strong>入境信息</strong><br/>
                          <span>{{tripinfo.plan_date}}</span>
                        </div>
                        <div class="flex-grow-1 pr-10">
                          <v-row>
                            <v-col cols="6" class="py-0">
                              <v-row align="center" style="height: 100%;" class="flex-nowrap">
                                <label class="text-right flex-shrink-0" style="width: 140px;">起飞地点：</label>
                                <div class="pr-4 flex-grow-1">
                                  <v-text-field v-model="formData.in_flight_start_city"></v-text-field>
                                </div>
                              </v-row>
                            </v-col>
                            <v-col cols="6" class="py-0">
                              <v-row align="center" style="height: 100%;" class="flex-nowrap">
                                <label class="text-right flex-shrink-0" style="width: 140px;">降落地点：</label>
                                <div class="pr-4 flex-grow-1">
                                  <v-text-field v-model="formData.in_flight_end_city"></v-text-field>
                                </div>
                              </v-row>
                            </v-col>
                          </v-row>
                          <v-row>
                            <v-col cols="6" class="py-0">
                              <v-row align="center" style="height: 100%;" class="flex-nowrap">
                                <label class="text-right flex-shrink-0" style="width: 140px;">航次信息：</label>
                                <div class="pr-4 flex-grow-1">
                                  <v-text-field v-model="formData.in_flight"></v-text-field>
                                </div>
                              </v-row>
                            </v-col>
                            <v-col cols="6" class="py-0">
                              <v-row align="center" style="height: 100%;" class="flex-nowrap">
                                <label class="text-right flex-shrink-0" style="width: 140px;">入境日期：</label>
                                <div class="pr-4 flex-grow-1">
                                  <date-picker v-model="formData.in_date" type="date"></date-picker>
                                </div>
                              </v-row>
                            </v-col>
                          </v-row>
                        </div>
                        <div class="flex-shrink-0 text-center" style="width: 100px;border-left: 1px solid #ccc;">
                          <v-btn disabled color="warning" outlined>{{ $t('actions.delete') }}</v-btn>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <div class="flex-shrink-0 text-center" style="width: 140px;border-right: 1px solid #ccc;">
                          <strong>离境信息</strong><br/>
                          <span>{{tripinfo.back_date}}</span>
                        </div>
                        <div class="flex-grow-1 pr-10">
                          <v-row>
                            <v-col cols="6" class="py-0">
                              <v-row align="center" style="height: 100%;" class="flex-nowrap">
                                <label class="text-right flex-shrink-0" style="width: 140px;">起飞地点：</label>
                                <div class="pr-4 flex-grow-1">
                                  <v-text-field  v-model="formData.out_flight_start_city"></v-text-field>
                                </div>
                              </v-row>
                            </v-col>
                            <v-col cols="6" class="py-0">
                              <v-row align="center" style="height: 100%;" class="flex-nowrap">
                                <label class="text-right flex-shrink-0" style="width: 140px;">降落地点：</label>
                                <div class="pr-4 flex-grow-1">
                                  <v-text-field v-model="formData.out_flight_end_city"></v-text-field>
                                </div>
                              </v-row>
                            </v-col>
                          </v-row>
                          <v-row>
                            <v-col cols="6" class="py-0">
                              <v-row align="center" style="height: 100%;" class="flex-nowrap">
                                <label class="text-right flex-shrink-0" style="width: 140px;">航次信息：</label>
                                <div class="pr-4 flex-grow-1">
                                  <v-text-field v-model="formData.out_flight"></v-text-field>
                                </div>
                              </v-row>
                            </v-col>
                            <v-col cols="6" class="py-0">
                              <v-row align="center" style="height: 100%;" class="flex-nowrap">
                                <label class="text-right flex-shrink-0" style="width: 140px;">离境日期：</label>
                                <div class="pr-4 flex-grow-1">
                                  <date-picker v-model="formData.out_date" type="date"></date-picker>
                                </div>
                              </v-row>
                            </v-col>
                          </v-row>
                        </div>
                        <div class="flex-shrink-0 text-center" style="width: 100px;border-left: 1px solid #ccc;">
                          <v-btn disabled color="warning" outlined>{{ $t('actions.delete') }}</v-btn>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                </v-container>
              </v-expansion-panel>

              <v-expansion-panel readonly>
                <v-expansion-panel-header hide-actions>
                  <div class="d-flex align-center justify-space-between">
                    <span>行程安排</span>
                    <v-btn color="indigo" outlined @click="addLine">添加行程</v-btn>
                  </div>
                </v-expansion-panel-header>
                <v-divider />
                <el-table
                  :data="lines"
                  border>
                  <el-table-column
                    prop="trip_date"
                    label="日期"
                    width="200">
                    <template slot-scope="{ row }">
                      <date-picker v-model="row.trip_date" :clearable="false" type="date"></date-picker>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="行程"
                    width="280">
                    <template slot-scope="{ row }">
                      <v-textarea
                        v-model="row.trip"
                        rows="5"
                        no-resize
                        auto-grow
                        hide-details
                        outlined
                        >
                      </v-textarea>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="用餐"
                    width="280">
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.dine.breakfast"
                        dense
                        outlined
                        label="早餐(B)"
                        hide-details
                        class="my-2">
                      </v-text-field>
                      <v-text-field
                        v-model="row.dine.midfood"
                        dense
                        outlined
                        label="午餐(L)"
                        hide-details
                        class="my-2">
                      </v-text-field>
                      <v-text-field
                        v-model="row.dine.dinner"
                        dense
                        outlined
                        label="晚餐(D)"
                        hide-details
                        class="my-2">
                      </v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="酒店"
                    width="280">
                    <template slot-scope="{ row }">
                      <v-textarea
                        v-model="row.hotel"
                        rows="5"
                        no-resize
                        auto-grow
                        hide-details
                        outlined
                        >
                      </v-textarea>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="景点"
                    width="280">
                    <template slot-scope="{ row }">
                      <v-textarea
                        v-model="row.scenics"
                        rows="5"
                        no-resize
                        auto-grow
                        hide-details
                        outlined
                        >
                      </v-textarea>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="餐厅"
                    width="280">
                    <template slot-scope="{ row }">
                      <v-textarea
                        v-model="row.restaurants"
                        rows="5"
                        no-resize
                        auto-grow
                        hide-details
                        outlined
                        >
                      </v-textarea>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="备注"
                    width="280">
                    <template slot-scope="{ row }">
                      <v-textarea
                        v-model="row.remark"
                        rows="5"
                        no-resize
                        auto-grow
                        hide-details
                        outlined
                        >
                      </v-textarea>
                    </template>
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    align="center"
                    label="操作"
                    width="80">
                    <template slot-scope="{ $index }">
                      <v-btn outlined color="warning" @click="handleRemoveLine($index)">{{ $t('actions.delete') }}</v-btn>
                    </template>
                  </el-table-column>
                </el-table>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="2">
        <v-banner sticky single-line>
          <v-row class="py-2">
            <v-col cols="5"><v-btn style="width: 80px;" @click="handleSave(1)" color="info" >预留占位</v-btn></v-col>
            <v-col cols="5"><v-btn style="width: 80px;" @click="handleSave(2)" color="primary">确认订单</v-btn></v-col>
          </v-row>
          <v-stepper class="elevation-0" non-linear vertical>
            <v-stepper-step editable step="1">
              行程基本信息
            </v-stepper-step>
            <v-stepper-content step="1">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="2">
              航班信息
            </v-stepper-step>
            <v-stepper-content step="2">
              <v-card color="lighten-1"></v-card>
            </v-stepper-content>
            <v-stepper-step editable step="3">
              行程安排
            </v-stepper-step>
          </v-stepper>
        </v-banner>
      </v-col>
  </v-row>
  </v-form>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data() {
    return {
      panel: [0, 1, 2],
      lines: [],
      tripinfo: '',
      formData: {
        foundation_prodcut_name: '',
        in_flight_end_city: '',
        in_flight_start_city: '',
        in_flight: '',
        in_date: '',
        out_flight_end_city: '',
        out_flight_start_city: '',
        out_flight: '',
        out_date: '',
        detail: {
          self_cost: [],
          shopping: []
        }
      }
    }
  },
  props: {
    value: [String, Object]
  },
  computed: {
    type() {
      return this.value.type
    },
    childs() {
      let res = this.value?.childs || []
      delete this.value.childs
      let items = [this.value, ...res].map(item => {
        return {
          ...item,
          tripname: (item.company_name || '主团') + ` · ${item.code}`
        }
      })
      this.setTripinfo(items[0])
      return items
    }
  },
  methods: {
    dayjs,
    addLine() {
      this.lines.push({
        trip_date: this.lines.length ? dayjs(this.lines[this.lines.length - 1]['trip_date']).add(1, 'day').format('YYYY-MM-DD') : this.value.plan_date,
        trip: '',
        dine: {
          breakfast: '',
          midfood: '',
          dinner: '',
        },
        hotel: '',
        remark: '',
        restaurants: '',
        scenics: ''
      })
    },
    handleRemoveLine(index) {
      this.lines.splice(index, 1)
    },
    setTripinfo(data) {
      this.tripinfo = data
      this.setFormData(data)
    },
    setFormData(data) {
      this.formData.foundation_prodcut_name = data.foundation_prodcut_name
      this.formData.detail.self_cost = data.detail && data.detail.self_cost && data.detail.self_cost.split(',')
      this.formData.detail.shopping = data.detail && data.detail.shopping && data.detail.shopping.split(',')
      this.formData.in_flight_end_city = data.in_flight_end_city
      this.formData.in_flight_start_city = data.in_flight_start_city
      this.formData.in_flight = data.in_flight
      this.formData.in_date = data.in_date
      this.formData.out_flight_end_city = data.out_flight_end_city
      this.formData.out_flight_start_city = data.out_flight_start_city
      this.formData.out_flight = data.out_flight
      this.formData.out_date = data.out_date
    },
    handleChangeTripinfo(data) {
      this.setFormData(data)
    }
  }
}
</script>

<style>

</style>